<template>
    <div class="main1">
        <content-title :content="title"></content-title>
        <ul class="ContentBox-select">
            <li class="ContentBox-item-fist" abc="0" @click="click">式神录</li>
            <li class="ContentBox-item" abc="1" @click="click">主角录</li>
            <li class="ContentBox-item" abc="2" @click="click">声优录</li>
        </ul>
        <div class="ContentBox-display">
            <transition name="left">
                <div class="ContentBox-left" v-show="content1" ></div>    
            </transition>
            <transition name="right">
                <div class="ContentBox-right" v-show="content1" ></div>
            </transition>
            <div class="ContentBox-display-left"><p class="ContentBox-display-title">{{initial.contentLeft}}</p><div class="ContentBox-display-box"></div></div> 
            <div class="ContentBox-display-right"><p class="ContentBox-display-title">{{initial.contentRight}}</p><div class="ContentBox-display-box"></div></div>   
        </div>
    </div>
</template>

<script>
import ContentTitle from "@/main/components/ContentTitle"
export default {
    name: "ContentBox",
    props: ["content1"],
    components: {
        ContentTitle
    },
    data(){
        return{
            "list": [{
                "id": "ContentBox1",
                "contentLeft": "般若",
                "contentRight": "蟹姬",
                "imgLeft": "box1_1.png",
                "imgRight": "box1_2.png"
            },{
                "id": "ContentBox2",
                "contentLeft": "八百比丘尼",
                "contentRight": "神乐",
                "imgLeft": "box2_1.png",
                "imgRight": "box2_2.png"
            },{
                "id": "ContentBox1",
                "contentLeft": "般若",
                "contentRight": "蟹姬",
                "imgLeft": "box1_1.png",
                "imgRight": "box1_2.png"
            }],
            "initial": {
                "id": "ContentBox1",
                "contentLeft": "般若",
                "contentRight": "蟹姬",
                "imgLeft": "box1_1.png",
                "imgRight": "box1_2.png"
            },
            "title": 1
        }
    },
    methods: {
        click(e){
            $(e.target).css({
                "color": "#fff",
                "background": "rgb(179,143,77)"
            }).siblings().css({
                "color": "#212121",
                "background": "#fff"
            });

            const index = $(e.target).attr("abc")*1;
            this.title = index;
            this.initial = this.list[index];
            console.log(this.initial)
            $(".ContentBox-left").css({
                "background": `url("/static/img/${this.initial.imgLeft}")`
            })
            $(".ContentBox-right").css({
                "background": `url("/static/img/${this.initial.imgRight}")`
            })
            
        }
    }
}
</script>

<style lang="stylus" scoped>
    .main1
        position: relative
        margin: 1rem auto
        width: 85%
        height: 13rem
        background: #fff
        .ContentBox-select
            position: absolute
            top: 0
            left: 2.7rem
            display: flex
            flex-flow: row nowrap 
            justify-content: space-between
            width: 6rem
            height: .64rem
            border: .04rem solid rgb(179,143,77)
            background: #ffffff
            padding: .04rem
            .ContentBox-item-fist
                width: 1.92rem
                height: .64rem
                background: rgb(179,143,77)
                text-align: center
                line-height: .64rem
                color: #fff
            .ContentBox-item
                width: 1.92rem
                height: .64rem
                background: #ffffff
                text-align: center
                line-height: .64rem
                color: #212121
        .ContentBox-display
            position: absolute
            left: 0
            right: 0
            margin: 0 auto
            top: 4.7rem
            width: 18.8rem
            height: 8.4rem
            background: blue
            background: url("/static/img/box1_bg.jpg") no-repeat
            .ContentBox-left
                position: absolute
                top: -4rem
                left: -3rem
                width: 24rem
                height: 11.16rem
                background: url("/static/img/box1_1.png")
            .left-enter
                opacity: 0
                left: -6rem
            .left-enter-active
                transition: all 3s ease;
            .ContentBox-right
                position: absolute 
                top: -3.6rem
                right: -3rem
                width: 24rem
                height: 11.16rem
                background: url("/static/img/box1_2.png")
            .right-enter
                opacity: 0
                right: -6rem
            .right-enter-active
                transition: all 3s ease;
            .ContentBox-display-left,.ContentBox-display-right
                position: absolute
                top: 0
                width: 1.6rem
                height: 6.4rem
                border: .02rem solid #ecdbbd
                color: #ecdbbd
                background: #fff url("/static/img/ContentBox-bottom.png") no-repeat bottom
            .ContentBox-display-left
                left: -2.84rem
                .ContentBox-display-title
                    position: absolute
                    top: 1rem
                    left: 0
                    right: 0
                    margin: 0 auto 
                    font-size: .32rem
                    word-wrap: break-word 
                    width: .36rem
                    // height: .8rem
                .ContentBox-display-title::before
                    position: absolute
                    top: -.6rem
                    left: 0
                    right: 0
                    margin: 0 auto
                    content: '.'
                    font-size: 0
                    height: .32rem
                    width: 0
                    border-left: .02rem solid  #ecdbbd
                .ContentBox-display-box
                    position: absolute
                    right: -.6rem
                    top: 0
                    bottom: 0
                    margin: auto 0
                    width: 1.2rem
                    height: 1.2rem
                    border: .02rem solid  #ecdbbd
                    background: #fff url("/static/img/box1.png") -574px -606px
            .ContentBox-display-left:hover,.ContentBox-display-left:hover>.ContentBox-display-title::before
                color: #c2a060
                border: .02rem solid #c2a060
            .ContentBox-display-left:hover>.ContentBox-display-box
                background-color: #c2a060
            .ContentBox-display-right
                right: -2.84rem
                .ContentBox-display-title
                    position: absolute
                    top: 1rem
                    left: 0
                    right: 0
                    margin: 0 auto 
                    font-size: .32rem
                    word-wrap: break-word 
                    width: .36rem
                    // height: .8rem
                .ContentBox-display-title::before
                    position: absolute
                    top: -.6rem
                    left: 0
                    right: 0
                    margin: 0 auto
                    content: '.'
                    font-size: 0
                    height: .32rem
                    width: 0
                    border-left: .02rem solid  #ecdbbd 
                .ContentBox-display-box
                    position: absolute
                    left: -.6rem
                    top: 0
                    bottom: 0
                    margin: auto 0
                    width: 1.2rem
                    height: 1.2rem
                    border: .02rem solid  #ecdbbd
                    background: #fff url("/static/img/box1.png") -526px -606px
            .ContentBox-display-right:hover,.ContentBox-display-right:hover>.ContentBox-display-title::before
                color: #c2a060
                border: .02rem solid #c2a060
            .ContentBox-display-right:hover>.ContentBox-display-box
                background-color: #c2a060
    
                

</style>
